<template>
  <el-dialog :visible.sync="vis" title="选择用户">
    <el-table :data="data">
      <el-table-column width="55">
        <template slot-scope="scope">
          <el-radio v-model="userId" :label="scope.row.id"></el-radio>
        </template>
      </el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="vis = false">取 消</el-button>
      <el-button type="primary" @click="vis = false">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    value: Object
  },
  data() {
    return {
      vis: false,
      data: [{ id: 0, username: 'www' }],
      userId: ''
    };
  },
  watch: {
    vis(val) {
      this.$emit('update:visible', val);
    },
    visible(val) {
      this.vis = val;
    },
    value(user) {
      this.userId = user.id;
    },
    userId(val) {
      const user = this.data.find(user => user.id === val);
      this.$emit('input', user);
    }
  }
};
</script>

<style>

</style>
